<template>
    <div class="container">
      <div class="header">
        <van-icon name="arrow-left" class="header-left" size="30" @click="goBack"/>
          填写服务订单
      </div>
      <StatusBar item="0" />
      <van-cell class="cell">
        <template #title>
          <van-image width="25" height="25" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          <span class="server-name">就医尊享</span>
        </template>
        <template #default>
          <div class="service-text">服务内容</div>
        </template>
      </van-cell>
      <van-cell-group class="cell">
        <van-cell >
          <template #title>
            就诊医院
          </template>
          <template #default>
            <div @click="showHospital=true" >
              {{ form.hospitalName || "请选择医院" }}
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>

        <van-cell >
          <template #title>就诊时间</template>
          <template #default>
            <div @click="showStartTime=true" >
              {{ currentDate || "请选择就诊时间" }}
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>

        <van-cell >
          <template #title>
            陪诊师
          </template>
          <template #default>
            <div @click="showStuff=true" >
              {{ form.stuffName || "请选择陪诊师" }}
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>

        <van-cell >
          <template #title>
            接送地址
          </template>
          <template #default>
            <van-field
                class="text"
                input-align="right"
                v-model="form.receiveAddress"
                placeholder="请填写地址"
            />
          </template>
        </van-cell>

        <van-cell >
          <template #title>
            联系电话
          </template>
          <template #default>
            <van-field
                class="text"
                input-align="right"
                v-model="form.contact"
                placeholder="请填写电话"
            />
          </template>
        </van-cell>


      </van-cell-group>

      <van-cell-group class="cell" title="服务需求">
        <van-field
            class="text"
            style="height: 100px"
            v-model="form.demand"
            placeholder="请填写服务需求"
        >

        </van-field>
      </van-cell-group>
      <van-button @click="submit" class="submit" type="primary" size="large">
        提交订单
      </van-button>

      <!-- 医院列表选择 -->
      <van-popup
          v-model:show="showHospital"
          position="bottom"
          :style="{ height: '30%' }"
      >
        <van-picker
            title=""
            :columns="showHospitalColumns"
            @confirm="showHospitalConfirm"
            @cancel="showHospital=false"
        />
      </van-popup>

      <van-popup
          v-model:show="showStartTime"
          position="bottom"
          :style="{ height: '30%' }"
      >
        <van-date-picker
            title="选择日期"
            :min-date="minDate"
            @confirm="showTimeConfirm"
            @cancel="showStartTime=false"
        />
      </van-popup>
      <!-- 陪诊师选择 -->
      <van-popup
          v-model:show="showStuff"
          position="bottom"
          :style="{ height: '30%' }"
      >
        <van-picker
            title=""
            :columns="showCompanionColumns"
            @confirm="showCompanionConfirm"
            @cancel="showStuff=false"
        />
      </van-popup>

      <!-- 支付二维码弹窗 -->
      <van-dialog v-model:show="showCode" title="" :show-confirm-button="false">
        <van-icon name="cross" class="close" @click="closeCode"></van-icon>
        <div>微信支付</div>
        <van-image width="150" height="150" :src="codeImg" />
        <div>请使用本人微信扫描二维码</div>
      </van-dialog>

    </div>
</template>

<script setup>
import { useRouter  } from "vue-router";
import StatusBar from "../../components/statusBar.vue"
import QrCode from 'qrcode'
import {getCurrentInstance, onMounted, reactive, ref, computed} from "vue";
import {showNotify} from "vant";
// 获取当前vue实例
const { proxy } = getCurrentInstance();
const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})
const router = useRouter();
// 就诊医院
const showHospital = ref(false);
const showStartTime = ref(false);
const showStuff = ref(false);
const currentDate = ref();

// 日期范围
const minDate = ref(new Date())

const showHospitalColumns = computed(()=>{
  return createInfo.hospitals.map( item => {
    return { text: item.name, value: item.id }
  })
})
const showCompanionColumns = computed(()=>{
  return createInfo.companion.map( item => {
    return { text: item.name+'('+item.age+')', value: item.id }
  })
})
// form数据
const form = reactive({
    demand: '默认需求',
    receiveAddress: "默认地址",
    contact: '123'
})
// 选择医院
const showHospitalConfirm  = (item) => {
  form.hospitalId = item.selectedValues[0]
  form.hospitalName = item.selectedOptions[0].text
  // 关闭
  showHospital.value = false
}
// 选择时间
const showTimeConfirm = (item) => {
  const dataStr = item.selectedValues.join("-")
  console.log(dataStr)
  const date = new Date(dataStr)
  currentDate.value = dataStr;
  date.setHours(0, 0, 0, 0); // 设置时间为 00:00:00
  form.startTime = date.getTime();
  console.log(form.startTime)
  // 关闭
  showStartTime.value = false
}
// 选择陪诊师
const showCompanionConfirm= (item) => {
  form.stuffId = item.selectedValues[0]
  form.stuffName = item.selectedOptions[0].text
  // 关闭
  showStuff.value = false
}

onMounted(async () => {
  const { data } = await proxy.$api.h5Companion();
  Object.assign(createInfo, data.data);
  console.log('createInfo', createInfo);

})
// 点击返回
const goBack = () => {
  router.go(-1);
}

const showCode = ref(false);
const codeImg = ref('');
// 关闭弹窗
const closeCode = () => {
  showCode.value = false;
  router.push('/order')
}
// 提交订单
const submit = async () => {
  console.log("提交表单");
  const params = [
    'hospitalId',
    'hospitalName',
    'stuffId',
    'startTime',
    'receiveAddress',
    'demand',
    'contact'

  ]
  for (const i of params) {
    if (!form[i]) {
      showNotify({message: '请填写每一项'});
      return;
    }
  }
  showNotify({type: 'primary', message: '订单正在提交！，请稍等'});
  const { data } = await proxy.$api.createOrder(form);

  if (data.code==0){

    showNotify({type: 'success', message: '订单成功提交！'});
    // 重置
    resetForm();
    console.log("data ",data.data);
    QrCode.toDataURL(data.data).then((url)=>{
      showCode.value = true;
      codeImg.value = url;
    })
  }else{
    showNotify({type: 'warning', message: '订单提交失败,'+data.msg});
  }
}
const resetForm = () => {
  form.value = reactive({
    hospitalId: null,
    hospitalName: null,
    stuffId: null,
    stuffName: null,
    demand: '默认需求',
    receiveAddress: "默认地址",
    contact: '123'
  });
}

</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }
  .server-name {
    margin-left: 10px;
  }
}
.service-text {
  background: url()
  no-repeat center center;
  background-size: 20px;
}
.submit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
